<template>
  <div class="rzgl-main">
    <ComTable :isstyle="isstyle" :tableimg="tableimg" :tabletext="tabletext" :isleft="isleft" :istree="istree"
      :activedata='leftdata' :issearch="false" :issearchbtn="issearchbtn" :searchbtn="searchbtn"
      :istablerightbtn="istablerightbtn" :tablerightbtn="tablerightbtn" :istableformbtn='true'
      :tableformbtn="tableformbtn" :istablecolbtn="istablecolbtn" :tablecolbtn="tablecolbtn"
      :tablerightfrom="tablerightfrom" :tablerightfromvalue="formConfig.searchform" :tableData="tableData" />
    <div>sadadasdasda</div>
  </div>

  <Eldioa headtext="编辑用户" :dialogVisible="editdialogVisible" @eddialogVisible="updateDialogVisible" :elwidth="746"
    :elheight="400">
    <template #dialogbody>
      <Elfrom :form-config="formConfig.userEdit" v-model="editform" :show-actions="false" @submit="editsub"
        ref="editformRef" />

      <div class="dialog-footer" style="text-align: right;">
        <el-button type="primary" style="background: rgba(4, 134, 254, 1);" @click="handleSubmit">
          确认
        </el-button>
        <el-button style="background: transparent;border:1px solid rgba(89, 175, 249, 0.70);color:rgba(1, 194, 255, 1)"
          @click="handleCancel">
          取消
        </el-button>
      </div>




    </template>
  </Eldioa>
</template>

<script setup>
import { ref, provide, onMounted } from 'vue'
import { getuserlist, putuser, deluser } from '@/api'
import ComTable from '@/components/table/index.vue'
import tableImgSrc from '@/assets/img/components/headicon.png'
import Eldioa from '@/components/eldioa/index.vue'
import Elfrom from '@/components/elfrom/index.vue'
import formConfig from './userfromconfig'

const props = defineProps({
  isstyle: {
    type: String,
    default: ''
  }
});




// 弹窗名称和icon
const tableimg = ref(tableImgSrc)
const tabletext = ref('事件管理页面')

const editdialogVisible = ref(false)

const updateDialogVisible = (newValue) => {
  editdialogVisible.value = newValue
}

const editformRef = ref()
const editform = ref({
  userName: "",
  roleCode: "",
  status: '',
  remarks: "",
  userId: null
})


const editsub = async (editsubdata) => {
  console.log('editsubdata', editsubdata)
  await putuser(editsubdata)
  editdialogVisible.value = false
  editformRef.value.resetFields()
  await getuserlistapi()
}



const handleSubmit = async () => {
  if (!editformRef.value) return
  try {
    await editformRef.value.handleSubmit()
  } catch (error) {
    console.error('表单提交失败:', error)
  }
}

const handleCancel = () => {
  if (!editformRef.value) return
  editformRef.value.handleReset()
  editdialogVisible.value = false
}


/* 
左侧
isleft 是否显示 左侧数据
istree  是否显示 树形结构
leftdata  左侧数据
btnactivindex  点击之后的数据
*/
const istree = ref(false)
const isleft = ref(false)
const leftdata = ref([])
const btnactivindex = (data) => {
  console.log(data)
}
provide('btnactivindex', btnactivindex)
/* 
右侧
tablerightfrom 表单数据
tablerightfromvalue 动态表单属性(查询表单)

isissearch 是否显示查询表单

searchbtnfun  右侧头部查询按钮点击事件回调
issearchbtn  是否显示右侧头部查询按钮
searchbtn  右侧头部按钮数据

istablerightbtn  是否显示最右侧头部按钮
tablerightbtn  最右侧头部按钮数据

istablecolbtn  是否显示表格列按钮
tablecolbtn  表格列按钮数据
untablecolbtn 表格列按钮数据回调

tableData 表格数据
pageChange 分页改变
pageSizeChange 每页条数改变

istableformbtn 是否显示表单按钮
tableformbtn 表单按钮数据
*/

const searchbtnfun = (data) => {
  console.log('searchbtnfun', data)

  switch (data.name) {
    case '检索':

      tablerightfrom.value.page = 1
      tablerightfrom.value.pageSize = 15
      getuserlistapi(tablerightfrom.value)
      break;
    case '重置':
      tablerightfrom.value = {
        userName: '',
        status: '',
      }
      getuserlistapi()
      break;
  }
}
provide('searchbtnfun', searchbtnfun)

// 右侧头部表单，动态按钮
const issearchbtn = ref(true)

const searchbtn = ref([
  {
    name: '检索',
    type: 'primary'
  },
  {
    name: '重置',
    type: ''
  }
])

const tablerightbtn = ref([])


const istablerightbtn = ref(false)

const istablecolbtn = ref(false)

const tablecolbtn = ref([
  {
    name: '编辑',
    type: 'primary',
    islink: true
  },
  {
    name: '删除',
    type: 'danger',
    islink: true
  }
])

const untablecolbtn = async (data, row) => {
  console.log('单行表格数据', data, row)
  switch (data.name) {
    case '编辑':
      editdialogVisible.value = true
      // editform.value = row
      editform.value.userName = row.userName
      editform.value.roleCode = row.roleName == '系统用户' ? 'ROLE_USER' : 'ROLE_ADMIN'
      editform.value.status = row.status
      editform.value.remarks = row.remarks
      editform.value.userId = row.id
      break;

    case '删除':
      await deluser(row.id)
      getuserlistapi()
      break;


  }
}
provide('untablecolbtn', untablecolbtn)



const tablerightfrom = ref({
  userName: '',
  status: '',
})

const tablerightfromvalue = ref()

// 表格
const tableData = ref()

const SelectionChange = (data) => {
  console.log('change多选', data)
}
provide('SelectionChange', SelectionChange)

// 分页
const pageChange = async (page) => {
  await getuserlistapi({ page, pageSize: tableData.value.pageSize });
}
const pageSizeChange = async (pageSize) => {
  await getuserlistapi({ page: 1, pageSize });
}

provide('handlePageChange', pageChange)
provide('handlePageSizeChange', pageSizeChange)

const getuserlistapi = async (asdaa) => {
  const { data } = await getuserlist({ ...tablerightfrom.value, page: asdaa?.page || 1, pageSize: asdaa?.pageSize || 15 })
  tableData.value = {
    tablename: '事件管理页面',
    ...data
  }
}


const tableformbtn = ref([
  {
    name: '确定',
    type: 'primary',
    islink: true
  },
  {
    name: '取消',
    type: '',
    islink: true
  }
])


// const tableformbtndata = (item) => {
//   console.log('tableformbtndata', item)
// }

// provide('tablebtnfun', tableformbtndata)
onMounted(() => {
  getuserlistapi()
})

</script>

<style lang="less" scoped>
:deep(.el-form-item__label) {
  color: #fff;
}
</style>